<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function move(fromId,toId) {
               var fromObj=document.getElementById(fromId);
               var toObj=document.getElementById(toId);

                for (var i = fromObj.options.length-1; i >=0 ; i--) {
                    var currOption=fromObj.options[i];

                    if(currOption.selected){

                        // var text=currOption.text;
                        // var value=currOption.value;
                        //
                        // var option=new Option(text,value);
                        //
                        // toObj.options[toObj.options.length]=option;
                        // fromObj.options[i]=null;


                        toObj.options[toObj.options.length]=fromObj.options[i];

                    }
                }

            }


            function moveAll(fromId,toId) {
                var fromObj=document.getElementById(fromId);
                var toObj=document.getElementById(toId);

                for (var i = fromObj.options.length-1; i >=0 ; i--) {
                    toObj.options[toObj.options.length]=fromObj.options[i];
                }

            }


            function move2(fromId,toId) {
                var fromObj=document.getElementById(fromId);
                var toObj=document.getElementById(toId);

                for (var i = 0; i < fromObj.options.length; i++) {
                    var currOption=fromObj.options[i];

                    if(currOption.selected){
                        currOption.style.color="#dddddd";
                        toObj.options[i].style.color="#000000";
                        currOption.selected=false;
                    }
                }
            }

            function moveAll2(fromId,toId) {
                var fromObj=document.getElementById(fromId);
                var toObj=document.getElementById(toId);

                for (var i = 0; i < fromObj.options.length; i++) {
                    var currOption=fromObj.options[i];
                    currOption.style.color="#dddddd";
                    toObj.options[i].style.color="#000000";
                    currOption.selected=false;
                }
            }

            function beforeSubmit(){
                var obj=document.getElementById("s2");

                for (var i = 0; i < obj.options.length; i++) {
                    obj.options[i].selected="selected";
                }
            }

            function beforeSubmit2(){
                var obj=document.getElementById("s4");

                for (var i = 0; i < obj.options.length; i++) {
                    if(obj.options[i].style.color=="rgb(0, 0, 0)"){
                        obj.options[i].selected="selected";
                    }
                }
            }

        </script>
    </head>
    <body>

        <form action="#" onsubmit="beforeSubmit();">

            <table style="background-color: #00ffff;padding: 10px;">
                <tr>
                    <td>
                        <select id="s1" multiple="multiple" style="width: 150px;height: 200px;">
                            <option value="1">aaa</option>
                            <option value="2">bbb</option>
                            <option value="3">ccc</option>
                            <option value="4">ddd</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="--&gt;" style="width: 40px;" onclick="move('s1','s2');"><br/>
                        <input type="button" value="&lt;--" style="width: 40px;" onclick="move('s2','s1');"><br/>
                        <input type="button" value="--&gt;&gt;" style="width: 40px;" onclick="moveAll('s1','s2');"><br/>
                        <input type="button" value="&lt;&lt;--" style="width: 40px;" onclick="moveAll('s2','s1');"><br/>
                    </td>
                    <td>
                        <select id="s2" name="s2" multiple="multiple" style="width: 150px;height: 200px;">
                        </select>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交"/>
        </form>
        <hr/>

        <form action="#" onsubmit="beforeSubmit2();">
            <table style="background-color: #00ffff;padding: 10px;">
                <tr>
                    <td>
                        <select id="s3" multiple="multiple" style="width: 150px;height: 200px;">
                            <option value="1" style="color: #000000;">aaa</option>
                            <option value="2" style="color: #000000;">bbb</option>
                            <option value="3" style="color: #000000;">ccc</option>
                            <option value="4" style="color: #000000;">ddd</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="--&gt;" style="width: 40px;" onclick="move2('s3','s4');"><br/>
                        <input type="button" value="&lt;--" style="width: 40px;" onclick="move2('s4','s3');"><br/>
                        <input type="button" value="--&gt;&gt;" style="width: 40px;" onclick="moveAll2('s3','s4');"><br/>
                        <input type="button" value="&lt;&lt;--" style="width: 40px;" onclick="moveAll2('s4','s3');"><br/>
                    </td>
                    <td>
                        <select id="s4" name="s4" multiple="multiple" style="width: 150px;height: 200px;">
                            <option value="1" style="color: #dddddd;">aaa</option>
                            <option value="2" style="color: #dddddd;">bbb</option>
                            <option value="3" style="color: #dddddd;">ccc</option>
                            <option value="4" style="color: #dddddd;">ddd</option>
                        </select>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>